import React from 'react';
// import { connect } from 'react-redux';
// import Actions from '../Actions.js'
import '../until/TimeFormat.js';
import Methods from '../until/Store.js';
import {Form, Input, Button} from 'antd';

const FormItem = Form.Item;

export default class BlogForm extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      title: '',
      content: '',
      createdAt: ''
    }
  }

  handleInputChange = (e) => {
    console.log("改变");
    let name = e.target.name
    let value = e.target.value
    this.setState({
      [name]: value
    })
  }

  handleClickFormButton = (e) =>{
    e.preventDefault();
    let title = this.state.title
    let content = this.state.content
    let time = new Date()
    let uid = Methods.uuid()
    time = time.Format("yyyy-MM-dd hh:mm:ss")
    console.log('uid'+ uid);
    this.props.handleAdd({title: title, content: content, created_at: time, status: true, uid: uid})
    this.initializeState()
  }

  initializeState() {
    console.log("重置表单信息");
    this.setState({
      title: '',
      content: ''
    })

  }

  unVaild() {
    let title = this.state.title
    let content = this.state.content
    return title !== "" && content !== ""
  }

  render(){
    return(
      <Form horizontal onSubmit={this.handleClickFormButton}>
        <div style={{marginTop: 30}}>
        </div>
        <FormItem
          id="control-input"
          label="标题："
          labelCol={{ span: 2 }}
          wrapperCol={{ span: 5 }}>
          <Input id="control-input" placeholder="Please enter..." name='title' value={this.state.title} onChange={this.handleInputChange} />
        </FormItem>

        <FormItem
          id="control-textarea"
          label="内容："
          labelCol={{ span: 2 }}
          wrapperCol={{ span: 5 }}>
          <Input type="textarea" id="control-textarea" rows="6" name='content' value={this.state.content} onChange={this.handleInputChange} />
        </FormItem>
        <Button type="primary" style={{marginLeft: 155}} htmlType="submit" disabled={!this.unVaild()} >添加</Button>
      </Form>
    )
  }

  renderOld() {
    return(
      <div>
        <form onSubmit={this.handleClickFormButton}>
          <div className="form-group row">
            <label className="col-sm-2 col-form-label">Title</label>
            <div className="col-sm-10">
              <input type="text" className="form-control" style={{width: 20 + '%'}} value={this.state.title} name='title' id="title" placeholder="Title" onChange={this.handleInputChange}/>
            </div>
          </div>
          <div className="form-group row">
            <label className="col-sm-2 col-form-label">Content</label>
            <div className="col-sm-10">
              <textarea type="text" className="form-control" style={{width: 30 + '%', height: 100}} value={this.state.content} name='content' id="content" placeholder="Content" onChange={this.handleInputChange} />
            </div>
          </div>

          <div className="form-group row">
            <label className="col-sm-2 col-form-label"></label>
            <div className="col-sm-10">
              <button type="submit" className="btn btn-primary" disabled={!this.unVaild()}>
                添加记事
              </button>
            </div>
          </div>


        </form>
      </div>
    )
  }


}
